<script setup name="userModifyPassword">
import { shallowRef, reactive } from 'vue';

const { isShowDialog, oldPassword }  = defineProps({
    isShowDialog: {
        type: Boolean,
        default: false,
    },
    oldPassword: {
        type: String,
        default: '',
    }
})

const formData = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const rules = reactive({
  oldPassword: [
    { required: true, message: '请输入原密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    { 
      validator: (rule, value, callback) => {
        if (value !== formData.newPassword) {
          callback(new Error('两次输入密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
})

const emit = defineEmits(['ModifySave', 'ModifyCancel'])

const handleSave = () => {
  emit('ModifySave', formData.newPassword)
}

const handleCancel = () => {
  emit('ModifyCancel')
}
</script>

<template>
    <div class="userModifyPassword">
        <el-dialog 
        :model-value="isShowDialog" 
        width="40%" top="30vh"
        :show-close="false"
        :open-delay="100"
        :close-on-click-modal="false"
        >
        <!-- 标题部分 -->
            <template #header>
                <div class="dialogTitle">
                    <div class="line"></div>
                    <div>修改密码</div>
                </div>
            </template>
            <!-- 内容部分 -->
            <template #default>
                <el-form :model="formData" :rules="rules" label-width="90px">
                  <div class="dialogContent">
                      <el-form-item label="原密码：" prop="oldPassword" class="oldPassword">
                          <!-- 内容的标题 -->
                          <div class="title" slot="label">
                              <span class="star">*</span>
                              <span>原密码：</span>
                          </div>
                          <!-- 内容的输入框 -->
                          <div class="inputPart">
                              <el-input v-model="formData.oldPassword" type="password" show-password></el-input>
                          </div>
                      </el-form-item>
                      <el-form-item label="新密码：" prop="newPassword" class="newPassword">
                          <div class="title" slot="label">
                              <span class="star">*</span>
                              <span>新密码：</span>
                          </div>
                          <div class="inputPart">
                              <el-input v-model="formData.newPassword" type="password" show-password></el-input>
                          </div>
                      </el-form-item>
                      <el-form-item label="确认密码：" prop="confirmPassword" class="confirmPassword">
                          <div class="title" slot="label">
                              <span class="star">*</span>
                              <span>确认密码：</span>
                          </div>
                          <div class="inputPart">
                              <el-input v-model="formData.confirmPassword" type="password" show-password></el-input>
                          </div>
                      </el-form-item>
                      <div class="footer">
                          <div class="save" @click="handleSave">保存</div>
                          <div class="cancel" @click="handleCancel">取消</div>
                      </div>
                  </div>
                </el-form>
            </template>
        </el-dialog>        
    </div>
</template>

<style scoped lang="scss">
@use "@/common/scss/color" as color;
.dialogTitle{
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 20px;
    font-weight: 500;
    .line{
        width: 4px;
        height:20px;
        border-radius: 2px;
        background-color: color.$user-modifyPart-line;
    }
}
.dialogContent{
    width: 100%;
    padding-left: 5px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-weight: 500;
    
    :deep(.el-form-item) {
      margin-bottom: 0;
      display: flex;
      align-items: center;
      
      .el-form-item__content {
        line-height: normal;
      }
    }
    
    .oldPassword, .newPassword, .confirmPassword{
        width: 100%;
        display: flex;
        align-items: center;
        div{
            display: inline-block;
        }
        .title{
            width: 90px;
            .star{
                padding-right: 3px;
                color:red;
            }            
        }
        .inputPart{
            position: relative;
            
            :deep(.el-input) {
              .el-input__wrapper {
                width: 15vw;
                height: 3.5vh;
                border: none;
                border-radius: 3px;
                background-color: #f2f3f5;
                box-shadow: none;
                padding: 0 5px;
                
                &.is-focus {
                  outline: none;
                  box-shadow: 0 0 0 1px color.$user-modifyPart-line inset;
                }
              }
            }
            
            :deep(.el-form-item__error) {
              position: absolute;
              top: 3.5vh;
              left: 0;
              font-size: 10px;
              color: red;
              padding-top: 2px;
            }
        }
    }
    .footer{
        width: calc(15vw + 90px);
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap:40px;
        font-weight: 400;
        font-size: 12px;
        .save{
            width: 5vw;
            height: 3vh;
            border-radius: 3px;
            background-color: color.$user-modifyPart-button;
            text-align: center;
            line-height: 3vh;
            color:white;
            cursor: pointer;
        }
        .cancel{
            width: 5vw;
            height: 3vh;
            border-radius: 3px;
            background-color: #f2f3f5;
            text-align: center;
            line-height: 3vh;
            cursor: pointer;
        }
    }
}
</style>